import React, {
    Component
} from 'react'
import {
    observer
} from 'mobx-react';
import {
    Tools,
    SearchBar,
    Icon,
    Popover
} from "weaver-mobile";
import {
    withRouter, 
    Link
} from 'react-router-dom';
const getLabel = Tools.getLabel;
const Item = Popover.Item;

@withRouter
@observer
export default class SearchCondition extends Component {
    render() {
        const {
            store,
            route
        } = this.props;
        const {
            showPop,
            alllevel,
            setShowPop,
            onPopoverSelectHandle,
            doQuickSearch,
            onQuickSearchChangeHandle,
            onClearSearchCondition,
            subAdvanceSearchPageStore
        } = store;
        const {
            form: {
                formParams
            }
        } = subAdvanceSearchPageStore;
        let extraButtons = [];
        extraButtons.push({
            key: 'drop',
            show: <Popover
                  visible={showPop}
                  overlay={<Item key="alllevel">{alllevel ? getLabel(390066, '隐藏下级下属') : getLabel(83783, '显示下级下属')}</Item>}
                  onSelect={onPopoverSelectHandle}
                  onVisibleChange={setShowPop}
                >
                  <Icon key="ellipsis" type="ellipsis" />
                </Popover>,
        });

        const searchBarProps = {
            value: formParams.lastname,
            placeholder: getLabel(390068, '请输入姓名/首字母/电话/编号'),
            onSubmit: doQuickSearch,
            onChange: onQuickSearchChangeHandle,
            onClear: onClearSearchCondition,
            maxLength: 100,
            showExtraButton: true,
            extraButton: [{
                    key: 'advanceSearch',
                    show: <Link to={subAdvanceSearchPageStore.path}><Icon type='filter-o'/></Link>
                },
                ...extraButtons
            ]
        }
        return (
            <div>
                <SearchBar {...searchBarProps} />
            </div>
        )
    }
}